---
title: Style rendered Markdown with Tailwind Typography
description: Learn how to use @tailwind/typography to style your rendered Markdown.
i18nReady: true
type: recipe
---

import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';

You can use [Tailwind](https://tailwindcss.com)'s Typography plugin to style rendered Markdown from sources such as Astro's [**content collections**](/en/guides/content-collections/).

This recipe will teach you how to create a reusable Astro component to style your Markdown content using Tailwind's utility classes.

## Prerequisites

An Astro project that:

	- has [Astro's Tailwind integration](/en/guides/integrations-guide/tailwind/) installed.
	- uses Astro's [content collections](/en/guides/content-collections/).

## Setting Up `@tailwindcss/typography`

First, install `@tailwindcss/typography` using your preferred package manager.

<PackageManagerTabs>
 	<Fragment slot="npm">
	```shell 
	npm install -D @tailwindcss/typography
	```
	</Fragment>
  	<Fragment slot="pnpm">
	```shell 
	pnpm add -D @tailwindcss/typography
	```
	</Fragment>
  	<Fragment slot="yarn">
	```shell
	yarn add --dev @tailwindcss/typography
	```
	</Fragment>
</PackageManagerTabs>

Then, add the package as a plugin in your Tailwind configuration file.

```diff lang="js"
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  theme: {
    // ...
  },
  plugins: [
+   require('@tailwindcss/typography'),
    // ...
  ],
}
```

## Recipe

1. Create a `<Prose /> ` component to provide a wrapping `<div>` with a `<slot />` for your rendered Markdown. Add the style class `prose` alongside any desired [Tailwind element modifiers](https://tailwindcss.com/docs/typography-plugin#element-modifiers) in the parent element.

    ```astro title="src/components/Prose.astro"
    ---
    ---
    <div 
      class="prose dark:prose-invert 
      prose-h1:font-bold prose-h1:text-xl 
      prose-a:text-blue-600 prose-p:text-justify prose-img:rounded-xl 
      prose-headings:underline">
      <slot />
    </div>
    ```
    :::tip
    The `@tailwindcss/typography` plugin uses [**element modifiers**](https://tailwindcss.com/docs/typography-plugin#element-modifiers) to style child components of a container with the `prose` class. 

    These modifiers follow the following general syntax: 

      ```
      prose-[element]:class-to-apply
      ``` 

    For example, `prose-h1:font-bold` gives all `<h1>` tags the `font-bold` Tailwind class.
    :::

2. Query your collection entry on the page you want to render your Markdown. Pass the `<Content />` component from `await entry.render()` to `<Prose />` as a child to wrap your Markdown content in Tailwind styles.

    ```astro title="src/pages/index.astro"
    ---
    import Prose from '../components/Prose.astro';
    import Layout from '../layouts/Layout.astro';
    import { getEntry } from 'astro:content';

    const entry = await getEntry('collection', 'entry');
    const { Content } = await entry.render();
    ---
    <Layout>
      <Prose>
        <Content />
      </Prose>
    </Layout>
    ```

## Resources

- [Tailwind Typography Documentation](https://tailwindcss.com/docs/typography-plugin)
